<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    dictMap: {
      type: Object,
      default: {}
    },
    barData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      chart: null,
      dict: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.barData.map(item => {
        item.入库 = item.entryWeight;
        item.出库 = item.outWeight;
        item.库存 = item.stockWeight;
        item.product = this.dictMap[item.foodType];
      })
      console.log(this.dictMap)
      this.chart.setOption({
        tooltip: { // 
          trigger: 'axis', // 触发类型。坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['入库', '出库', '库存']
        },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
          // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          // 完成映射，参见后文。
          dimensions: ['product', '入库', '出库', '库存'],
          source: this.barData
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{ type: 'category' }],
        yAxis: {
          type: 'value',
          name: '重量',
          position: 'left',
          axisLabel: {
            formatter: '{value} 斤'
          }
        },
        series: [{ type: 'bar', }, { type: 'bar', }, { type: 'bar', }]
      })


    }
  }
}
</script>
